<template>
  <div id="app" :style="{ '--color': defaultTheme }">
    <keep-alive>
      <router-view v-if="isRouterActive" />
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data() {
    return {
      isRouterActive: true,
    };
  },
  computed: {
    defaultTheme() {
      return this.$store.state.theme;
    },
  },
  mounted() {
    if (localStorage.getItem('theme')) {
      this.themeChange(localStorage.getItem('theme'));
    }
  },
  provide() {
    return {
      reload: this.reload,
    };
  },
  methods: {
    reload() {
      this.isRouterActive = false;
      this.$nextTick(() => {
        this.isRouterActive = true;
      });
    },
    themeChange(val) {
      this.$store.commit('SETTHEME', {
        key: 'theme',
        value: val,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#app {
  height: 100%;
}
</style>
